<template>
  <!-- jhipster-pro-please-regenerate-this-file 如果您修改了此文件，并且不希望重新生成代码时被覆盖，请删除本行！！！-->
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form layout="inline" @submit.prevent="save" class="ant-advanced-update-form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.id')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.commonTable.id.$model" id="common-table-id" name="id" read-only />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.name')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input placeholder="input placeholder" v-model="$v.commonTable.name.$model" id="common-table-name" name="name" required />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.entityName')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTable.entityName.$model"
              id="common-table-entityName"
              name="entityName"
              required
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.tableName')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTable.tableName.$model"
              id="common-table-tableName"
              name="tableName"
              required
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.system')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-switch
              v-model="$v.commonTable.system.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-system"
              name="system"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.clazzName')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTable.clazzName.$model"
              id="common-table-clazzName"
              name="clazzName"
              required
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.creatAt')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-date-picker id="common-table-creatAt" name="creatAt" show-time v-model="$v.commonTable.creatAt.$model"> </a-date-picker>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.generateAt')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-date-picker id="common-table-generateAt" name="generateAt" show-time v-model="$v.commonTable.generateAt.$model">
            </a-date-picker>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTable.generateClassAt')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-date-picker
              id="common-table-generateClassAt"
              name="generateClassAt"
              show-time
              v-model="$v.commonTable.generateClassAt.$model"
            >
            </a-date-picker>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.description')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTable.description.$model"
              id="common-table-description"
              name="description"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.treeTable')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-switch
              v-model="$v.commonTable.treeTable.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-treeTable"
              name="treeTable"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.baseTableId')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTable.baseTableId.$model"
              id="common-table-baseTableId"
              name="baseTableId"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTable.recordActionWidth')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTable.recordActionWidth.$model"
              id="common-table-recordActionWidth"
              name="recordActionWidth"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.editInModal')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-switch
              v-model="$v.commonTable.editInModal.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-editInModal"
              name="editInModal"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.searchForm')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-switch
              v-model="$v.commonTable.searchForm.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-searchForm"
              name="searchForm"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.metaModel')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-select id="common-table-metaModel" name="metaModel" v-model="commonTable.metaModelId">
              <a-select-option v-bind:value="commonTableOption.id" v-for="commonTableOption in commonTables" :key="commonTableOption.id">{{
                commonTableOption.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.creator')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-select id="common-table-creator" name="creator" v-model="commonTable.creatorId">
              <a-select-option v-bind:value="userOption.id" v-for="userOption in users" :key="userOption.id">{{
                userOption.login
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTable.businessType')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-select id="common-table-businessType" name="businessType" v-model="commonTable.businessTypeId">
              <a-select-option
                v-bind:value="businessTypeOption.id"
                v-for="businessTypeOption in businessTypes"
                :key="businessTypeOption.id"
                >{{ businessTypeOption.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item>
            <a-collapse defaultActiveKey="1" :bordered="false" :showArrow="false">
              <a-collapse-panel :header="$t('jhipsterApp.modelConfigCommonTable.listConfig')" key="1">
                <jhi-quill-editor
                  v-model="$v.commonTable.listConfig.$model"
                  id="common-table-listConfig"
                  name="listConfig"
                ></jhi-quill-editor>
              </a-collapse-panel>
              <a-collapse-panel :header="$t('jhipsterApp.modelConfigCommonTable.formConfig')" key="2">
                <jhi-quill-editor
                  v-model="$v.commonTable.formConfig.$model"
                  id="common-table-formConfig"
                  name="formConfig"
                  required
                ></jhi-quill-editor>
              </a-collapse-panel>
            </a-collapse>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-tabs defaultActiveKey="1">
            <a-tab-pane :tab="$t('jhipsterApp.modelConfigCommonTable.commonTableFields')" key="1">
              <jhi-common-table-field :showInOther="true" :commonTableId="commonTable.id"></jhi-common-table-field>
            </a-tab-pane>
            <a-tab-pane :tab="$t('jhipsterApp.modelConfigCommonTable.relationships')" key="2">
              <jhi-common-table-relationship :showInOther="true" :commonTableId="commonTable.id"></jhi-common-table-relationship>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
      <a-row type="flex" justify="center">
        <a-col span="3">
          <a-button @click="previousState()">{{ $t('entity.action.cancel') }}</a-button>
        </a-col>
        <a-col span="3">
          <a-button html-type="submit" type="primary" :disabled="$v.commonTable.$invalid || isSaving">{{
            $t('entity.action.save')
          }}</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script lang="ts" src="./common-table-update-template.component.ts"></script>
<style>
.ant-advanced-update-form .ant-form-item {
  display: flex;
}
.ant-advanced-update-form .ant-form-item-control-wrapper {
  flex: 1;
}
</style>
